<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <!-- <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <title>文件识别查询平台</title>
    <script src="/static/js/jquery-2.2.2.min.js"></script>
    <link href="/static/layui/css/layui.css" rel="stylesheet">

    <!--<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-width: 600px)">

    <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 601px)">-->

    <style>


        .body_{
            background-color: #f5f6fb;
        }

        .search_{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 35px;
        }

        #query_param{
            width: 782px;
        }
        .search_ img{
            width: 40px;
            height: auto;
        }
        .search_ span{
            font-size: 25px;
            font-weight: 500;
        }
        .search_all{
            margin-top: 120px;
        }
        .layui-input2{
            border-top-left-radius: 8px;
            border-end-start-radius: 8px;
            height: 45px;

        }

        .layui-input-split{
            background-color: #0076fa;
            border-top-right-radius: 8px;
            color: #fff;
            border-end-end-radius: 8px;
            width: 52px;
            cursor: pointer;
        }

        .upload{
            display: flex;justify-content: center;
        }
        .upload div{
            width: 898px;
        }
        .upload div button{
            background-color: #dce9fc;
            border: 1px solid #dce9fc;
            color: #0076fa;
            border-radius: 8px;
        }
        .upload div button img{
            margin-right: 10px;
            margin-left: -10px;
            width: 25px;
            height: auto;

        }
        .items_1{
            /*margin-top: 30px;*/
            display: flex;
            justify-content: center;
        }
        .item_2{
            width: 1440px;
        }

        .item_2 ul{
            display: flex;
            flex-wrap: wrap;
            margin-left: 40px;

        }
        .item_2 ul li{
            width: 250px;
            height: 250px;
            margin-top: 15px;
            margin-left: 15px;
            cursor: pointer;

        }
        .div_img{
            width: 250px;
            height: 180px;

        }
        .div_img img{
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            width: 100%;
            height: 100%
        }
        .li_div2{
            width: 100%;
            height: 70px;
            background-color: #ffffff;
            border-end-start-radius: 10px;
            border-end-end-radius: 10px;

        }
        .div_item{
            position: absolute;
            display: block;
        }
        .d_c p {
            width: 200px; /* 设置容器宽度 */
            padding: 0px 35px;
            white-space: nowrap; /* 确保文本不换行 */
            overflow: hidden; /* 隐藏超出容器的内容 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
            height: 20px;

        }

        .d_ch{
            position: relative;
            top: 19px;
            left: 15px;
        }

        .layui-flow-more{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 250px;
        }

        /*.layui-flow-more a{
            background-color: #f5f6fb;
            color: #f5f6fb;
        }
        .layui-flow-more a cite {
            background-color: #f5f6fb;
            color: #f5f6fb;
        }
    */

        .loading{
            /*margin-top: 30px;*/
        }
        .loading div{
            display: flex;
            justify-content: center;
            align-items: baseline
        }
        .loading div div{
            width: 1440px;
            background-color: #fff;
        }
        .loading div div div{

        }
        .loading div div div img{
            height: 100%;
        }
        .layui-input-group>.layui-input-suffix {
            width: 116px;
            border-left: 0;
            font-size: 17px;
        }

        .layui-btn-lg {
            height: 40px;
            line-height: 40px;
            padding: 0px 20px;
            font-size: 12px;
        }

        .layui-layer-btn .layui-layer-btn0{
            background-color: #0076fa;
        }

        .d_ss{
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }
        .d_ss .dd_ss{
            display: flex;
            align-items: center;
            width: 1330px;
        }
        .d_ss .dd_ss input{
            width: 150px;
            border-radius: 3px;

        }
        .ddd_ss{
            display: flex;
            justify-content: center;
            margin-left: 593px;
        }

        @media  (max-width: 1281px) {
            #query_param {
                width: 582px;
            }
            .upload div {
                width: 697px;
            }
            .item_2 ul{
                margin-left: 100px;
            }
            .item_2 ul li {
                width: 250px;
                height: 250px;
                margin-top: 15px;
                margin-left: 15px;
            }
            .loading div div{
                width: 1140px;
            }
            .loading div div div img {
                height: 70%;
            }

            .d_ss .dd_ss {
                width: 1050px;
            }
            .ddd_ss{
                margin-left: 450px;
            }
        }

        @media (max-width: 821px) {
            #query_param {
                width: 570px;
            }
            #search_1{
                display: flex;
                justify-content: left;
                padding: 0px 50px 0px 50px;
            }
            .upload {
                display: flex;
                justify-content: left;
                padding: 0px 50px 0px 50px;
            }
            .upload div {
                width: 665px;
            }

            .loading div div{
                width: 300px;
            }
            .loading div div div img{
                width: 220%;

            }

        }

        /*@media (max-width: 601px) {
            .search_all{
                width: 600px;
            }

            #query_param{
                padding-right: 300px;
            }

            .upload div {
                width: 522px;
            }
            .items_1 {
                width: 600px;
            }
            .item_2 ul {
                margin-left: 0px;
            }
            .item_2 ul li {
                margin-left: 35px;
            }

            .loading div div {
                width: 300px;
                margin-left: 22px;
            }
            .loading div div div img {
                width: 180%;
                margin-left: 150px;
            }
        }*/
        @media (max-width: 601px) {
            .search_ {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 20px;
            }
            #search_1{
                display: flex;
                justify-content: left;
                align-items: center;
                padding: 0px 30px 0px 30px;
            }

            .search_ span {
                font-size: 15px;
                font-weight: 500;
            }
            .search_ img {
                width: 28px;
                height: auto;
            }
            #query_param {
                width: 270px;
                height: 35px;
                font-size: 10px;
            }
            .layui-input-split,.layui-input-suffix{
                font-size: 10px;
            }
            .upload{
                display: flex;
                justify-content: left;
                align-items: center;
                padding: 0px 30px 0px 30px;
            }
            .upload div{
                width: 86%;
            }
            .upload div button {
                background-color: #dce9fc;
                border: 1px solid #dce9fc;
                color: #0076fa;
                border-radius: 8px;
                font-size: 10px;
            }
            .upload div button img {
                margin-right: 10px;
                margin-left: -10px;
                width: 18px;
                height: auto;
            }
            .items_1 {
                margin-top: 0px;
            }
            .item_2 ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                padding: 0;
                margin: 20px 20px 0px 20px;
                list-style-type: none;
            }
            .item_2 ul li {
                width: calc(50% - 5px);
                margin-top: 0px;
                cursor: pointer;
                height: 180px;
                margin-left: 0px;
         }
         .div_img {
             width: 100%;
             height: 120px;
             /*border-radius: 8px;*/
             overflow: hidden;
            }
            .div_img img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .li_div2 {
                width: 100%;
                background-color: #ffffff;
                /*border-radius: 6px;*/
                overflow: hidden;
                margin-top: 0px;
                height: 50px;
            }
            .li_div2 p {
                padding: 8px 8px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin: 0;
                font-size: 10px;
            }

            .loading div div div img {
                width: 110%;
            }
            .layui-input-group>.layui-input-suffix {
                width: 70px;
                border-left: 0;
                font-size: 12px;
            }
            .layui-btn-lg {
                height: 30px;
                line-height: 30px;
                padding: 0px 20px;
                font-size: 9px;
            }


        }



    </style>
</head>


<body class="body_">
    <div class="">
        <div class="search_all">
            <div class="search_">
                <img src="/static/img/office/search.png">
            </div>
            <div class="search_">
                <span>文件识别查询平台</span>
            </div>
            <div class="">
                <div class="search_" id="search_1">
                    <div class="layui-form-item">
                        <div class="layui-input-group">
                            <input type="text" placeholder="请输入搜索内容..." class="layui-input layui-input2" id="query_param">
                            <div class="layui-input-split layui-input-suffix" lay-on="test-msg-dark" onclick="query(this)">
                                搜索
                            </div>
                        </div>
                    </div>
                </div>
                <div class="upload" style="">
                    <div style="">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-lg" onclick="uploadFormPPT()" lay-on="test-msg-dark"><img src="/static/img/office/ppt_i.png">上传PPT文件</button>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-lg" onclick="uploadFormExcel()" lay-on="test-msg-dark"><img src="/static/img/office/excel_i.png">上传Excel文件</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="d_ss">
            <div style="" class="dd_ss">
                <div>价格</div>
                <input type="text" id="param2" placeholder="自定义最低价" class="layui-input" style="margin-left: 20px;">
                <span style="margin: 0 5px;">-</span>
                <input type="text" id="param3" placeholder="自定义最高价" class="layui-input">
                <button style="margin-left: 20px;height: 34px;display: flex;align-items: center;border-radius: 3px;" type="button" class="layui-btn" onclick="query(this)">筛选</button>
                <div class="ddd_ss" >
                    <button style="margin-left: 20px;height: 34px;display: flex;align-items: center;border-radius: 3px;" type="button" class="layui-btn layui-btn-primary layui-border-green">加入导出列表</button>
                    <button style="margin-left: 20px;height: 34px;display: flex;align-items: center;border-radius: 3px;" type="button" class="layui-btn">导出列表</button>
                </div>

            </div>

        </div>

        <div class="product_items">
            <div class="loading" style="display: none">
                <div>
                    <div>
                        <div style="">
                            <!--<img src="/static/img/office/loading4.gif" alt="Loading...">-->
                            <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 35px"></i>
                        </div>

                    </div>
                </div>
            </div>



            <div class="items_1">
                <div class="item_2">
                    <ul  id="ID-flow-demo" class="flow-demo">
                        <!--<li style="display: none">
                            <div class="div_img" style="">
                                <img src="/static/img/product.jpg" style="">
                            </div>
                            <div class="li_div2">
                                <p>K.S燃卡运动组合套装（六件套） / KS-780礼盒配置：配件1：K.S.几何计数跳绳配件2:  K.S. 发现者便携运动水杯配件3：舍刻燃卡挂耳咖啡 （ 10g*6包 ）配件4：K.S.四季运动袜 （精梳棉）配件5：K.S.微米纱极柔速干毛巾                                                                                                              配件6: K.S.超轻干湿分离健身旅行包彩盒尺寸：40x29x14cm装箱数：10PCS<br>零售价:  ￥625.00批发价：￥125.00（增票）             ￥118.75（普票）     <br></p>
                            </div>
                        </li>-->
                    </ul>
                </div>
            </div>
        </div>

        <div style="height: 50px"></div>

    </div>
    <input th:value = "${imageService}" style="display: none" id="imageService">

    <form id="uploadForm" enctype="multipart/form-data" style="display: none">
        <input type="file" id="fileInput" name="file" accept=".ppt,.pptx ">
        <label for="fileInput"></label>
        <span id="fileNameDisplay"></span>


    </form>

    <form id="uploadForm2" enctype="multipart/form-data" style="display: none">
        <input type="file" id="fileInput2" name="file2" accept=".xls,.xlsx">
        <label for="fileInput"></label>
        <span id="fileNameDisplay2"></span>
    </form>

   <!-- <div id="ID-flow-demo" class="flow-demo"></div>-->

    <div class="layui-btn-container" style="display:none;">
        <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-prompt-2" id="tips-prompt">prompt - 多行文本框层</button>
        <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-prompt-3" id="tips-prompt2">prompt - 多行文本框层</button>
    </div>

    <input id="param" style="display: none">




<script src="/static/layui/layui.js"></script>
<script src="/static/office/consulting.js"></script>

<script>

    function list(){

    }


    /*layui.use(function(){
        var flow = layui.flow;
        // 流加载实例
        flow.load({
            elem: '#ID-flow-demo',// 流加载容器
            //scrollElem: '#ID-flow-demo',// 滚动条所在元素，一般不用填，此处只是演示需要。
            direction: 'bottom',
            isAuto: true,
            mb: 50,
            done: function(page,next){ // 执行下一页的回调
                // 模拟数据插入
                setTimeout(function(){
                    var lis = [];
                    for(var i = 0; i < 4; i++){
                        let str = `
                        <li style="">
                            <div class="div_img" style="">
                                <img src="/static/img/product.jpg" style="">
                            </div>
                            <div class="li_div2">
                                <p>K.S燃卡运动组合套装（六件套） / KS-780礼盒配置：配件1：K.S.几何计数跳绳配件2:  K.S. 发现者便携运动水杯配件3：舍刻燃卡挂耳咖啡 （ 10g*6包 ）配件4：K.S.四季运动袜 （精梳棉）配件5：K.S.微米纱极柔速干毛巾                                                                                                              配件6: K.S.超轻干湿分离健身旅行包彩盒尺寸：40x29x14cm装箱数：10PCS<br>零售价:  ￥625.00批发价：￥125.00（增票）             ￥118.75（普票）     <br></p>
                            </div>
                        </li>`
                        lis.push(str)
                    }
                    // 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    // pages 为 Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''),page < 10); // 此处假设总页数为 10



                },520);
            }
        });
    });*/

    //listData("1",10,"")
    function listData(page,size,param){
        $.ajax({
            url: '/office/listData',// 上传地址
            type: 'POST',
            data: {page: page,size: "10",param: param},
            cache: false,//不启用缓存
            dataType: "json",//返回json格式的数据
            success: function(response){
                let records = response.data.records
                let str = ''
                let imageService = $('#imageService').val()
                for( key in records){

                    let images = records[key].images.split(";")
                    str += `
                        <li style="">
                            <div class="div_img">
                                <img src="`+imageService+images[0]+`">
                            </div>
                            <div class="li_div2">
                                <p>`+records[key].content+`</p>
                            </div>
                        </li>`
                }

                $('#ID-flow-demo').append(str)

            }
        })
    }


    var flag = false;

    //ppt
    $(document).ready(function(){
        // 当文件选择框中选择文件时，更新显示文件名并直接触发表单的提交事件
        $('#fileInput').on('change',function(){
            var fileName = $(this).val().split('\\').pop();
            $('#fileNameDisplay2').text(fileName);
            $('#uploadForm').submit(); // 直接触发表单提交
        });

        // 当表单提交时
        $('#uploadForm').submit(function(e){
            e.preventDefault(); // 阻止表单默认提交行为
            $('.upload_div').hide();
            // 显示加载动画
            $('.loading').show();
            window.scrollBy(0,100);
            flag = true;
            // 构建FormData对象
            var formData = new FormData();
            formData.append('file',$('#fileInput')[0].files[0]);
            formData.append('param',$('#param').val());
            // 发送Ajax请求
            $.ajax({
                url: '/office/pptUpload',// 上传地址
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response){
                    
                    let imageService = $("#imageService").val();
                    $('.layui-panel').remove();
                    let html = "";
                    if (response.success){
                        let ppts  = response.data;
                        html = productResultList(ppts);
                        $('#ID-flow-demo').append(html);
                        flag = false;
                        $('#param').val('')
                    }

                },
                error: function(xhr,status,error){
                    // 上传失败后的处理
                    $('.loading').hide();
                    flag = false;
                },
                complete: function(){
                    // 隐藏加载动画
                    $('.loading').hide();
                    flag = false;
                }
            });
        });
    });

    function uploadFormPPT(){
        if (flag){
            return
        }
        $('#ID-flow-demo').children().remove();

        $('#tips-prompt').click()
        //$('.loading').show();
       //window.scrollBy(0,100);

    }

    //excel
    $(document).ready(function(){
        // 当文件选择框中选择文件时，更新显示文件名并直接触发表单的提交事件
        $('#fileInput2').on('change',function(){
            var fileName = $(this).val().split('\\').pop();
            $('#fileNameDisplay2').text(fileName);
            $('#uploadForm2').submit(); // 直接触发表单提交
        });

        // 当表单提交时
        $('#uploadForm2').submit(function(e){
            e.preventDefault(); // 阻止表单默认提交行为
            $('.upload_div').hide();
            // 显示加载动画
            $('.loading').show();
            window.scrollBy(0,100);
            flag = true;
            // 构建FormData对象
            var formData = new FormData();
            formData.append('file',$('#fileInput2')[0].files[0]);
            formData.append('param',$('#param').val());

            // 发送Ajax请求
            $.ajax({
                url: '/office/excelUpload',// 上传地址
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response){
                    
                    let imageService = $("#imageService").val();
                    $('.layui-panel').remove();
                    let html = "";
                    if (response.success){
                        let ppts  = response.data;
                        html = productResultList(ppts);
                        $('#ID-flow-demo').append(html);
                        flag = false;
                        $('#param').val('')
                    }

                },
                error: function(xhr,status,error){
                    // 上传失败后的处理
                    //alert("Error: " + error);
                    $('.loading').hide();
                    flag = false;
                },
                complete: function(){
                    // 隐藏加载动画
                    $('.loading').hide();
                    flag = false;
                }
            });
        });
    });

    function uploadFormExcel(){
        if (flag){
            return
        }
        $('#ID-flow-demo').children().remove();
        //$('#fileInput2').click()
        $('#tips-prompt2').click()
    }



    function productResultList(param){
        //let item_index = 0;
        let items = '';
        let imageService = $("#imageService").val();
        for (key in param){
            let item = param[key];
            //param[key].item_index=item_index;
            //param[key].imageService=imageService;
            let item_img = imageService+item.images.split(";")[0];
            items += `
                        <li>
                            <input style="display: none" value="`+item.images+`">
                            <input style="display: none" value="`+item.content+`">
                            <input style="display: none" value="`+imageService+`">
                            <input style="display: none" value="`+item.fileName+`">
                            <input style="display: none" value="`+item.remark+`">
                            <input style="display: none" value="`+item.id+`">
                            <div class="div_img" onclick="item_info(this)">
                                <img src="`+item_img+`">
                            </div>
                            <div class="li_div2">
                                <div class="div_item">
                                    <div class="d_ch">
                                       <input type="checkbox" name="item_1" onclick="checkbox_item(this)" class="checkbox_id">
                                    </div>
                                    <div class="d_c">
                                        <p>`+item.content+`</p>
                                    </div>
                                </div>
                            </div>
                        </li>`
            ;
            //item_index++;
        }
        //setSharedData(param)
        //console.log(getSharedData())
        return items;
    }

    function item_info(e){
        let item = {};

        item.images = $(e).parent().children().eq(0).val();
        item.content = $(e).parent().children().eq(1).val();
        item.imageService =  $(e).parent().children().eq(2).val();
        item.fileName =  $(e).parent().children().eq(3).val();
        item.remark =  $(e).parent().children().eq(4).val();
        item.id =  $(e).parent().children().eq(5).val();
        setSharedData(item)
        console.log(getSharedData())
        window.open("/office/info")
        //window.location.href="/office/info?itemIndex="+$(e).children().eq(3).val()
    }

    layui.use(function(){
        var layer = layui.layer;
        var util = layui.util;
        util.on('lay-on',{
            "test-msg-dark": function(){
                if (flag){
                    layer.msg('正在上传文件,请稍后!');
                }

            },
        })
    });

    function query(e){
        if (flag){
            return
        }
        let param = $('#query_param').val();
        let param2 = $('#param2').val();
        let param3 = $('#param3').val();
        if (param == '' && param2 == '' && param3 == ''){
            $('#ID-flow-demo').children().remove();
            return
        }

        $.ajax({
            url: '/office/listAll',// 上传地址
            type: 'POST',
            data: {param: param, param2: param2, param3: param3},
            cache: false,//不启用缓存
            dataType: "json",//返回json格式的数据
            success: function (response) {
                $('#ID-flow-demo').children().remove();
                let imtes = response.data;
                let html = productResultList(imtes);
                $('#ID-flow-demo').append(html);
                window.scrollBy(0,100);
            }
        })
    }


    layui.use(function(){
        var layer = layui.layer;
        var util = layui.util;
        // 事件
        util.on('lay-on',{
            'test-tips-prompt-2': function(){
                layer.prompt({title: '请输入文件备注信息',formType: 2,btn:['下一步']},function(value,index,elem){


                    //if(value === '') return elem.focus();

                    //layer.msg('获得：'+ util.escape(value)); // 显示 value
                    $('#param').val(value);
                    // 关闭 prompt
                    layer.close(index);
                    $('#fileInput').click();
                });
            },

            'test-tips-prompt-3': function(){
                layer.prompt({title: '请输入文件备注信息',formType: 2,btn:['下一步']},function(value,index,elem){


                    //if(value === '') return elem.focus();

                    //layer.msg('获得：'+ util.escape(value)); // 显示 value
                     $('#param').val(value);
                    // 关闭 prompt
                    layer.close(index);
                    $('#fileInput2').click()
                });
            },

        })
    });

    function checkbox_item(e){
        selectedValues = $('.checkbox_id:checked').map(function() {
            let item = {};
            item.images = $(this).parent().parent().parent().parent().children().eq(0).val();
            item.content = $(this).parent().parent().parent().parent().children().eq(1).val();
            item.imageService =  $(this).parent().parent().parent().parent().children().eq(2).val();
            item.fileName =  $(this).parent().parent().parent().parent().children().eq(3).val();
            item.remark =  $(this).parent().parent().parent().parent().children().eq(4).val();
            item.id =  $(this).parent().parent().parent().parent().children().eq(5).val();
            return item;
        }).get();
        console.log(selectedValues)
    }

    /*let selectedValues;
    $(function (){
        $('.checkbox_item').click(function (){
            debugger

        });
    });*/





</script>





</body>
</html>